<template>
  <el-row class="pageRowStyle">
    <el-col :span="24" class="pageColStyle">
      <el-pagination
        v-model:current-page="pageData.currentPage"
        v-model:page-size="pageData.pageSize"
        :page-sizes="pageCofing.pageSizes"
        :small="pageCofing.small"
        :disabled="pageCofing.disabled"
        :background="pageCofing.background"
        :layout="pageCofing.layout"
        :total="pageData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-col>
  </el-row>
</template>

<script lang="ts">
import { basePageModel } from "@/model/public/public";
import { defineComponent, PropType } from "vue";
import { pageCofing } from "@/model/public/public";
export default defineComponent({
  props: {
    pageData: {
      type: Object as PropType<basePageModel>,
      required: true,
    },
  },

  setup(props, context) {

    //分页条数事件
    const handleSizeChange = (val: number) => {
      props.pageData.pageSize = val;
      context.emit("pageBnt", props.pageData);
    };

    //当前页数事件
    const handleCurrentChange = (val: number) => {
      props.pageData.currentPage = val;
      context.emit("pageBnt", props.pageData);
    };

    return {
      pageCofing,
      handleSizeChange,
      handleCurrentChange,
    };
  },
  components: {},
});
</script>
<style scoped>
.pageRowStyle {
  width: 100%;
  text-align: center;
  padding: 10px 0;
  margin-top: 10px;
}
.pageColStyle {
  display: grid;
  justify-content: end; 
}
</style>